<template>
  <view
    v-if="isShow"
    :style="{ background: background, transform: transform, transition: transition }"
    class="ar-image-picture"
  >
    <swiper
      :current="showIndex"
      :duration="250"
      :indicator-dots="false"
      indicator-active-color="#ffffff"
      indicator-color="rgba(255,255,255,.3)"
      style="width: 100%; height: 100%"
    >
      <swiper-item v-for="(item, index) in newSwiperImages" :key="index">
        <movable-area scale-area>
          <movable-view damping="40" direction="all" scale="true" scale-max="4" scale-min="1">
            <image
              :src="`${item.QSS === false ? item[src] : item[src] + '?Authorization=${userInfo.token}&us=app'}`"
              mode="widthFix"
              @touchend="handletouchend"
              @touchmove="handletouchmove"
              @touchstart="handletouchstart($event, item, index)"
            ></image>
          </movable-view>
        </movable-area>
        <uniIcons class="close" color="red" size="40" type="clear" @click="close()"></uniIcons>
        <view
          v-if="!item.isSee && !item.secretKey"
          class="lizhao-text"
          @click="seeArtwork(item, index)"
        >
          <view class="text1">
            {{$t('查看原图')}}
            <view v-if="item.title" style="font-size: 12px">
              ({{ item.title }}
              <text v-if="item.error === -1" class="Danger">{{$t('异常')}}</text>
              <text v-if="item.error === 0" class="Success">{{$t('正常')}}</text>
              <text v-if="item.error === 1" class="Warning">{{$t('警告')}}</text>
              )
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  components: {},
  data() {
    return {
      background: '#000000',
      transform: 'translate(0,0) scale(1)',
      transition: '',
      newSwiperImages: [],
      time: 0, //定时器
      interval: 500 //长按事件
    }
  },
  props: {
    maxUrlId: {
      type: String,
      default: 'uuid'
    },
    src: {
      type: String,
      default: 'url'
    },
    showIndex: {
      //当前显示第几章
      type: Number,
      default: 0
    },
    swiperImages: {
      type: Array,
      default: () => []
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isShow(val, oldVal) {
      //console.log(7777);
      this.transform = 'translate(0,0) scale(1)'
      //默认每个图片都没有被查看过
      this.isSeeFn()
    }
  },
  mounted() {
  },
  created() {
    //默认每个图片都没有被查看过
    this.isSeeFn()
  },
  methods: {
    handletouchstart(e, item, index) {
      var tchs = e.touches.length
      if (tchs !== 1) {
        return false
      }
      this.time = setTimeout(() => {
        this.onLongPress(e, item, index)
      }, this.interval)
      return false
    },
    //清除定时器
    handletouchend() {
      clearTimeout(this.time)
      if (this.time !== 0) {
        //处理点击时间
      }
      return false
    },
    //清除定时器
    handletouchmove() {
      clearTimeout(this.time)
      this.time = 0
    },
    // 处理长按事件
    onLongPress(e, item, index) {
      var data = { data: item, index }
      uni.showActionSheet({
        itemList: [this.$t('保存图片')],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.save(data.data)
          }
        },
        fail: (res) => {
          //console.log(res.errMsg);
        }
      })
    },
    //保存
    save(data) {
      var src = data.fileUrl
      //#ifdef MP-WEIXIN
      //提前向用户发起授权请求
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
          //console.log('kxj-previewImage:允许储存');
          this.downloadImg(src)
        }
      })
      //#endif

      //#ifdef APP-PLUS
      this.downloadImg(src)
      //#endif

      //#ifdef H5
      //非同源图片将直接打开
      var abtn = document.createElement('a')
      abtn.href = src
      abtn.download = ''
      abtn.target = '_blank'
      abtn.click()
      //#endif
    },

    //下载并保存文件
    downloadImg(src) {
      //下载图片文件
      uni.showLoading({
        title: this.$t('下载中')
      })
      uni.downloadFile({
        url: src,
        success: (res) => {
          uni.hideLoading()
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: this.$t('已保存至相册'),
                duration: 1000
              })
            }
          })
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({
            title: this.$t('图片下载失败'),
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    //点击查看原图
    seeArtwork(item, index) {
      //console.log('大图片的id', item[this.maxUrlId]);
      this.$u
        .get(this.api.GLOBAL_file_fileInfo_getOriginalPictureURLByFileId, {
          fileId: item[this.maxUrlId]
        })
        .then((res) => {
          if (res.code === 200) {
            this.newSwiperImages[index][this.src] =
              res.data + '?Authorization=' + this.userInfo.token + '&us=app'
            this.newSwiperImages[index].isSee = true
          }
        })
    },
    //默认每个图片都没有被查看过
    isSeeFn() {
      this.newSwiperImages = this.swiperImages.map((res) => {
        return {
          isSee: false, //默认每个图片都没有被查看过
          ...res
        }
      })
      // //console.log(this.newSwiperImages);
    },
    close() {
      this.transition = 'all .3s linear'
      this.transform = 'translate(0,100%) scale(0)'
      setTimeout(() => {
        this.$emit('close')
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './lizhao-image-picture.scss';

.Danger {
  color: #f56c6c;
  font-size: 12px;
}

.Success {
  color: #67c23a;
  font-size: 12px;
}

.Warning {
  color: #e6a23c;
  font-size: 12px;
}
</style>
